<template>
    <ul>
        <li v-for="item in comments" :key="item.id">
            <b>{{ item.content }}</b>
            <button @click="del(item.id)">删除</button>
        </li>
    </ul>
</template>
<script>
import { mapActions, mapState } from "vuex"
import * as api from "@/api/comment"
export default {
    methods: {
        ...mapActions("comment", ["FETCH_COMMENT"]),
        async del(id) {
            //调用删除接口,传递当前数据的id
            let res = await api.delComment(id)
            console.log(res)
            if(res.data.state){
                //删除之后重新获取评论数据,更新视图
                this.FETCH_COMMENT()
            }
        }
    },
    computed: {
        ...mapState('comment', ["comments"])
    },
    created() {
        this.FETCH_COMMENT()
    }
}
</script>